<template>
	<view>
		<nav-bar :title="title" :autoBack="true"></nav-bar>
		<view class="content">
			<view class="content_item">
				<u-text type="info" text="当前时间"></u-text>
				<view class="input_item">
					<u-input class="" border="surround" v-model="time"></u-input>
				</view>
			</view>
			<view class="button_auto content_item">
				<view class="button_auto_item">
					<u-button type="success" @click="getStampByTime(time,'timeStamp')">转换为时间戳</u-button>
				</view>
			</view>
			<view class="content_item">
				<u-text type="info" text="当前时间对应时间戳"></u-text>
				<view class="input_item">
					<u-input class="" border="surround" v-model="timeStamp"></u-input>
				</view>
			</view>
			<u-divider text="分割线" :dot="true"></u-divider>
			<view class="content_item">
				<u-text type="info" text="选择时间"></u-text>
				<view class="input_item">
					<u-input v-model="dataPickerFormat" class="" disabled>
						<u-text text="点击选择时间 |" prefixIcon="calendar" @click="show=true" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</view>

				<u-datetime-picker ref="datetimePicker" :show="show" v-model="dataPickerTime" mode="datetime" :formatter="formatter" @cancel="closeDatePicker" @confirm="confirmDatePicker"></u-datetime-picker>
			</view>
			<view class="button_auto content_item">
				<view class="button_auto_item">
					<u-button type="success" @click="getStampByTime(dataPickerFormat,'dataPickerTimeStamp')">转换为时间戳</u-button>
				</view>
			</view>
			<view class="content_item">
				<u-text type="info" text="选择时间对应时间戳"></u-text>
				<view class="input_item">
					<u-input class="" border="surround" v-model="dataPickerTimeStamp"></u-input>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let timer
	export default {
		computed: {},
		data() {
			return {
				title: "时间戳转换",
				time: '',
				timeStamp: '',

				show: false,
				dataPickerTime: Number(new Date()),
				dataPickerTimeStamp: '',
			}
		},
		computed: {
			dataPickerFormat: {
				get() {
					return uni.$u.timeFormat(this.dataPickerTime, 'yyyy-mm-dd hh:MM:ss');
				},
				set(v) {}
			}
		},
		onLoad() {

		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onShow() {
			timer = setInterval(this.getTime, 500);
		},
		onHide() {
			clearInterval(timer)
		},
		methods: {
			getTime() {
				let now = _.now()

				this.time = uni.$u.timeFormat(now, 'yyyy-mm-dd hh:MM:ss')
			},
			getStampByTime(v, el) {
				this[el] = Number(new Date(v))
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			closeDatePicker() {
				this.show = false
			},
			confirmDatePicker() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx 16rpx;
	}

	.input_item {
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.button_auto {
		display: flex;
		justify-content: center;

		.button_auto_item {
			flex: 0 0 auto;
		}
	}

	.content_item {
		margin: 16rpx 0;
	}
</style>
